<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>demo</title>
    <link rel="stylesheet" href="demo_2_3_1.css">
</head>
<script src="Tools/jquery-2.0.0.min.js"></script>


<script>

    $(document).ready(function(){
        $("button").click(function(){
            $("#p1").css("color","red").slideUp(2000).slideDown(2000);
        });
    });


    // $(document).ready(function(){
    //     $("button").click(function(){
    //         $("p").hide("slow");
    //         alert("段落现在被隐藏了");
    //     });
    // });

    // $(document).ready(function(){
    //     $("#flip").click(function(){
    //         $("#panel").slideDown("100000");
    //     });

    //     $("#stop").click(function(){
    //         $("#panel").stop();
    //     });
    // });

    // $(document).ready(function () {
    //     $("button").click(function(){
    //         $("p").hide();
    //     });
    // });

    // $(document).ready(function () {
    //     $("p").click(function () {
    //         $(this).hide();
    //     });
    //     // 尝试注册多个事件
    //     $("p").mouseenter(function () {
    //         alert("你的鼠标移到了p元素上!");
    //     });
    // });

    // $(document).ready(function(){
    //     $("#hide").click(function(){
    //         $("p").hide(1000, function(){
    //             alert("Hide() 方法已经完成")
    //         });
    //     });

    //     $("#show").click(function(){
    //         $("p").show(1000);
    //     });
    // });
    
    // $(document).ready(function(){
    //     $("#button1").click(function(){
    //         $("#div1").fadeIn();
    //         $("#div2").fadeIn("slow");
    //         $("#div3").fadeIn(3000);
    //     });

    //     $("#button2").click(function(){
    //         $("#div1").fadeOut();
    //         $("#div2").fadeOut("slow");
    //         $("#div3").fadeOut(3000);
    //     });

    //     $("#button3").click(function(){
    //         $("#div1").fadeTo("slow",0.15);
    //         $("#div2").fadeTo("slow",0.4);
    //         $("#div3").fadeTo("slow",0.8);
    //     });

    // });

    // $(document).ready(function(){
    //     $("#flip").click(function(){
    //         // $("#panel").slideDown("slow")
    //         // $("#panel").slideUp("slow")
    //         $("#panel").slideToggle();
    //     });
    // });
    // $(document).ready(function(){
    //     // $("button").click(function(){
    //     //     $("div").animate({left:'250px'});
    //     // });
    //     // 更加丰富的动画效果
    //     // $("button").click(function(){
    //     //     $("div").animate({
    //     //         height:'toggle'
    //     //         // left:'250px',
    //     //         // height:'+=150px',
    //     //         // width:'+=150px'
    //     //         // left:'250px',
    //     //         // opacity:"0.5",
    //     //         // height:"150px",
    //     //         // width:"150px"
    //     //     });
    //     // });

    //     //

    //     // $("button").click(function(){
    //     //     var div=$("div");
    //     //     div.animate({height:'300px',opacity:'0.4'},"slow");
    //     //     div.animate({width:'300px',opacity:'0.8'},"slow");
    //     //     div.animate({height:'100px',opacity:'0.4'},"slow");
    //     //     div.animate({width:'100px',opacity:'0.8'},"slow");
    //     // });
    
    //     $("button").click(function(){
    //         var div=$("div");
    //         div.animate({left:'100px'},"slow");
    //         div.animate({fontSize:'3em'},"slow");
    //     });
    
    
    // });

</script>



<body>

    <p id="p1">试一试jQuery的链接操作</p>
    <button>点我</button>


    <!-- <button>隐藏</button>
    <p>我们段落内容，点击“隐藏”按钮我就会消失</p> -->
    <!-- <button id="stop">停止滑动</button>
    <div id="flip">点我向下滑动面板</div>
    <div id="panel">Hello world!</div> -->

    <!-- <button>开始动画</button>
    <p>默认情况下，所有的 HTML 元素有一个静态的位置，且是不可移动的。 
    如果需要改变为，我们需要将元素的 position 属性设置为 relative, fixed, 或 absolute!</p>
    <div style="background:#98bf21;height:100px;width:100px;position:absolute;"></div> -->
    <!-- <div id="flip">点我滑下面板</div>
    <div id="panel">Hello world!</div> -->
    <!-- <p>以下实例演示了fadeIn（）使用不同参数的效果</p>
    <button id="button1">点击淡入 div 元素</button>
    <button id="button2">点击淡出 div 元素</button>
    <button id="button3">模拟 fadeTo函数效果</button>
    <div id="div1" style="width: 80px;height:80px;display: none;background-color: red;"></div>
    <div id="div2" style="width: 80px;height:80px;display: none;background-color: green;"></div>
    <div id="div3" style="width: 80px;height:80px;display: none;background-color: blue;"></div> -->
<!-- 
    <p>如果你点击“隐藏” 按钮，我将会消失。</p>
    <button id="hide">隐藏</button>
    <button id="show">显示</button> -->
    <!-- <p>如果你点我，我就会消失</p>
    <p>点我消失</p>
    <p>点我消失</p> -->
    <!-- <h1>我是一个例子</h1>
    <p>这是一个段落。</p>
    <p>这是另一个段落。</p>
    <button>点击我触发事件</button> -->
    
</body>
</html>

